<template>
    <div class="wrap">
        <Button  @click="$router.go(-1)" style="margin-left:20px;margin-top: 20px">
            <Icon type="ios-arrow-back" size="17" />返回
        </Button>
        <div>
            <div class="wrap-card">
                <Form ref="formItem" :model="formItem" :label-width="100" v-if="formItem.ApplyUser">
                    <p class="product-hr-title">预约人信息</p>
                    <div class="product-hr"></div>
                    <Row>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="姓名">
                                <span>{{formItem.ApplyUser.RealName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="电话">
                                <span>{{formItem.ApplyUser.MobilePhone}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="年龄">
                                <span>{{formItem.ApplyUser.Age}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="性别">
                                <span>{{formItem.ApplyUser.Sex}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="注册时间">
                                <span>{{formItem.ApplyUser.RegTime}}</span>
                            </FormItem>
                        </i-col>

                    </Row>
                    <p class="product-hr-title">病患信息</p>
                    <div class="product-hr"></div>
                    <Row>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="姓名">
                                <span>{{formItem.Patient.UserName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="性别">
                                <span>{{formItem.Patient.Sex}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="年龄">
                                <span>{{formItem.Patient.UserAge}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="地址">
                                <span>{{formItem.Patient.FromAddress}} - {{formItem.Patient.ToAddress}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="病情描述">
                                <span>{{formItem.Patient.SickName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="备注">
                                <span>{{formItem.ProName}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <p class="product-hr-title">订单信息</p>
                    <div class="product-hr"></div>
                    <Row>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="订单号">
                                <span>{{formItem.Order.OrderNum}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="服务项目">
                                <span>{{formItem.Order.OrderServerName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="支付方式">
                                <span>{{formItem.Order.PayType}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="支付流水号">
                                <span>{{formItem.Order.PayNum}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="预约时间">
                                <span>{{formItem.Order.BookingTime}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="金额">
                                <span>{{formItem.Order.Money_Total}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <p class="product-hr-title">护理人员信息</p>
                    <div class="product-hr"></div>
                    <Row>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="门店">
                                <span>{{formItem.ServiceUser.ShopName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="人员姓名">
                                <span>{{formItem.ServiceUser.RealName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="电话">
                                <span>{{formItem.ServiceUser.Mobile}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 4}">
                            <FormItem label="状态">
                                <span>{{formItem.ServiceUser.State}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <p class="product-hr-title">服务项目</p>
                    <div class="product-hr"></div>
                    <Table border :columns="columns1" :data="formItem.Items"></Table>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
    import Api from './service';
    export default {
        data() {
            return {
                formItem: {
                },
                columns1: [
                    {
                        title: '药品名称',
                        key: 'PName'
                    },
                    {
                        title: '数量',
                        key: 'TotCount'
                    },
                    {
                        title: '价格',
                        key: 'UnitPrice'
                    },
                    {
                        title: '小计',
                        key: 'TotalPrice'
                    },
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        },
        mounted() {
            Api.getItemDetail({
                id: this.$route.params.id
            }).then(((res) => {
                this.formItem = res.data
            }))
        },
    };
</script>

<style>
</style>

<style lang="less" scoped>
    .wrap-card {
        height: 80vh;
        overflow-y: scroll;
        padding: 20px;
    }

    .wrap-card::-webkit-scrollbar {
        width: 0 !important;
    }

    .wrap-card {
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

    .product-hr {
        background: #959595;
        height: 1px;
        margin: 10px 0;
    }

    .product-hr-title {
        color: #aaaaaa;
        font-size: 15px;
    }
</style>

